<template>
	<view class="search-wrap">
		<view class="flex-1">
			<u-input v-model="searchText" :placeholder="placeholder"></u-input>
		</view>
		<view class="btn" @click="search">
			搜索
		</view>
	</view>
</template>

<script>
	export default {
		name: "n-search",
		data() {
			return {
				searchText:''
			};
		},
		props:{
			placeholder:{
				type:String,
				default:'请输入您要搜索的内容'
			}
		},
		methods:{
			search(){
				this.$emit('click',this.searchText)
			}
		}
	}
</script>

<style lang="scss">
	.search-wrap {
		height: 72upx;
		background: #f5f5f5;
		border-radius: 72upx;
		padding-left: 30upx;
		@include flex;

		image {
			width: 34upx;
			margin: 0 10upx 0 20upx;
		}

		.text {
			font-size: 28upx;
			color: #318B59;
			margin-right: 10upx;
		}

		.btn {
			width: 120upx;
			height: 60upx;
			background: #318A59;
			box-shadow: 0px 3upx 6upx rgba(49, 138, 89, 0.2);
			border-radius: 32upx;
			margin-right: 6upx;
			font-size: 30upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 60upx;
		}
	}
</style>
